<script setup>
import { onMounted, nextTick, ref, reactive, watch } from 'vue'
</script>

<template>
  <div class="vueContain">
    <div class="header">
      <div class="headerBar">
        <div class="headerBarTitle">
          <img src="../assets/vue.svg" alt="">
          <p>Vue.js</p>
        </div>
      </div>
    </div>
    <div class="contain">
      <section id="detail">
        <div class="detailItem">
          <h2>易学易用</h2>
          <p> 基于标准 HTML、CSS 和 JavaScript 构建，提供容易上手的 API 和一流的文档。 </p>
        </div>
        <div class="detailItem">
          <h2>性能出色</h2>
          <p>经过编译器优化、完全响应式的渲染系统，几乎不需要手动优化。</p>
        </div>
        <div class="detailItem">
          <h2>灵活多变</h2>
          <p> 丰富的、可渐进式集成的生态系统，可以根据应用规模在库和框架间切换自如。 </p>
        </div>
      </section>
    </div>
  </div>
</template>

<style lang='less' scoped>
:global(body) {
  margin: 0;
  padding: 0;
  line-height: 24px;
}
:global(h2){
  margin: 0;
  padding: 0;
}
:global(p){
  margin: 0;
  padding: 0;
}
@maxSectonWidth:960px;
.textShow {
  color: transparent;
  text-shadow: 0 0 0 #000;
}

.vueContain {
  // width: 100vw;
  width:100%;
  min-height: 100vh;

  .header {
    border-bottom: 1px solid black;
    height: 55px;
    width: 100%;

    .headerBar {
      min-width: 768px;
      max-width: 1376px;
      height: 100%;
      // background-color: aqua;
      margin: 0 auto;

      .headerBarTitle {
        height: 100%;
        display: flex;
        align-items: center;
        cursor: pointer;
        img {
          height: 24px;
          width: 24px;
          .textShow()
        }
        p {
          padding-left: 8px;
          font-weight: 500;
          .textShow()
        }
      }
    }
  }

  .contain {
    // height: calc(100vh - 56px);
    section{
      padding: 42px 32px;
    }
    #detail{
      max-width: @maxSectonWidth;
      margin: 0 auto;
      display: flex;
      .detailItem{
        width: 300px;
        height: 500px;
        padding: 28px 36px;
        flex: 0 32%;
        h2{
          font-weight: 600;
          font-size: 20px;
          color: #000;
          margin-bottom: 20px;
        }
        p{
          font-weight: 400;
          font-size: 15px;
          color: rgba(60, 60, 60, .7);;
          white-space:normal
        }
      }
    }
  }
}
</style>